<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件监听相关</title>
    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="app">
<!--    第一种写法 事件监听的完整写法-->
    <button v-on:click="test1">test1</button>
<!-- 第二种写法 事件监听的简写   -->
<!--在vue模板事件回调函数 在调用的时候可以传递$event 且名字不能改,这个东西就是事件对象-->
    <button @click="test2($event)">test2</button>
<!--第三种 事件在添加的时候除了事件对象之外还要传递自己的参数的时候必须写$event    -->
    <button @click="test3('yangmi',$event)">test3</button>
<!-- 第四种 vue事件当中阻止冒泡  事件描述符 .stop -->
<div style="width: 300px;height: 300px;background-color: chartreuse" @click="outer">
    <div style="width: 100px;height: 100px;background-color: hotpink" @click.stop="inner"></div>
<!--    事件当中取消丽蓝旗默认行为 prevent事件描述符取消浏览器的默认行为-->
    <a href="http://www.atguigu.com" @click.prevent="cancelDefault">点我去学习</a>
<!--键盘事件都用在表单类元素和document身上  冒泡( body--html--初始包含块--document ) -->
    <input type="text" @keyup.enter ="keyEnter">

</div>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.config.productionTip=false;//   去除生产提示
    const vm=new Vue({
        el:"#app",
        data(){
            return {

            }
        },
        //event 事件对象 浏览器自动调用 这一次事件触发后相关的一切信息都封装在一个对象中
        methods:{
            test1(event){
                console.log( event.target.innerHTML);
            },
            test2(event){
                console.log( event.target.innerHTML);
            },
            test3(str,event){
                console.log( event.target.innerHTML);
            },
            outer(){
                console.log('外部');
            },
            inner(event){
                console.log('内部');

            },
            cancelDefault(event){
                event.preventDefault();//和 return false dom0级事件取消默认行为
            },
            keyEnter(event){
                // if (event.keyCode===13){
                //     console.log('回车了');
                // }
                console.log('回车了');
            }
        },
    });
</script>
</body>
</html>